<!-- 首页 -->
<template>
  <div class="maincontent">
    <div
      style=" position: relative;"
      class="dragcontainer"
      :style="{'background':iflogin?'white':''}"
    >
    
      <el-carousel
        height="40px"
        direction="vertical"
        style="border:1px solid #3e76de;padding-left:20px;"
        class="companynotice"
      >
        <el-carousel-item v-for="item in notification" :key="item">
          <div class="dot"></div>
          <h3 class="medium">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
   <TipComponent></TipComponent>

      <div class="notice" v-if="!iflogin">
        <div class="mtime">
          <span class="time">{{nowtime | dateFormat('hh:mm:ss')}}</span>
          <span class="date">{{nowtime | dateFormat('YYYY-MM-DD') }}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import TipComponent from "@/components/TipComponent"
export default {
  filters: {
    dateFormat(dateStr, time) {
      //得到特定的时间
      var date = new Date(dateStr);
      var year = date.getFullYear();
      //ES6语法填充：var month = (date.getMonth()+1).toString().padStart(2, '0');
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var mm =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      //return `${year}-${month}-${day}`;

      if (time && time.toLowerCase() === "yyyy-mm-dd") {
        return `${year}-${month}-${day}`;
      } else if (time && time.toLowerCase() === "hh:mm:ss") {
        return `${hh}:${mm}:${ss}`;
      } else {
        return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
      }
    }
  },
  data() {
    return {
      nowtime: "",
      width: 0,
      height: 0,
      top: 0,
      left: 0,
      myText: "",
      addmemorandialog: false,
      form: {
        title: "",
        content: ""
      },

      notification: ["栋A-215会议室今日投影仪维修，暂停开放", "通知2"]
    };
  },
  created() {
    this.nowtime = new Date();
    this.timer = setInterval(() => {
      this.nowtime = new Date();
    }, 1000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  components: { TipComponent },

  computed: { ...mapState([ "iflogin", "memorandumlist"]) },

  methods: {
    ...mapMutations(["changeMemorylist"]),
    addmemorand(form) {
      this.changeMemorylist({
        title: form.title,
        content: form.content
      });
      this.$refs.waterfall.refresh();
      this.addmemorandialog = false;
    },
    onInput(event) {
      //event.data contains the value of the textarea
    },

    onResize: function(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag: function(x, y) {
      this.x = x;
      this.y = y;
    }
  }
};
</script>
<style scoped lang="scss">
.maincontent {
  width: 100%;
  height: 700px;
  .dragcontainer {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/homebg.jpg");
    background-size: cover;
    filter: alpha(opacity=50);
    .companynotice {
      z-index: 2;
      background: white;
    }
    .notice {
      width: 100%;
      height: 300px;
      background: #3e76de80;
      position: relative;
      margin-top: 100px;
      .mtime {
        position: absolute;
        left: 50%;
        width: 400px;
        height: 400px;
        border-radius: 100%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 1px dashed white;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 12px 0 rgba(231, 231, 231, 0.4);
        .time {
          font-size: 50px;
          font-weight: bold;
        }
      }
    }
   
    .mymeeting {
    }
  }
}
</style>
<style >
.emoji-wysiwyg-editor {
  overflow: hidden;
  border: 0;
}
.at-tabs__nav-scroll {
  text-align: left;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 40px;
  margin: 0;
  text-align: left;
}
.el-carousel__item {
  display: flex;
  align-items: center;
}
.el-carousel__item .dot {
  width: 10px;
  height: 10px;
  background: #3e76de;
  border-radius: 100%;
  margin-right: 5px;
}
</style>